<template>
	<view class="content_box">
		<header-box :title="'执行部工作流程'"></header-box>

		<view class="flex justify-center align-center mt73">
			<image class="504 h30 mb54" src="https://w-jinxiao.oss-cn-chengdu.aliyuncs.com/20210322/00.png" mode="">
			</image>
		</view>


		<view class="r20 pt50 ml22 mr22 pb34 mb26 pb88" style="background-color: #FFFFFF;">
			<view class="info-text flex align-center justify-center">
				<view class="bgc1">
				</view>
				<text class="fs30">
					装货
				</text>
				<view class="bgc2">
				</view>
			</view>

			<view class="pl21 pr30 mt38 lh50 fs26">
				13米以上拖车以具体情况而定，6.8米-9.6米的货车提前2小时装货，4.2米的货车提前1个半小时装货）
			</view>


			<view class="flex align-center mt48 ml20">
				<view class="cuIcon-round-icon mr19"></view> <text class="f28">开始装货的时间</text>
			</view>
			<view class="r10 h60 lh60 bgc mt20 ww90 ml38 pl20 mb34">
				<text>2021.06.01 12:30</text>
			</view>

			<view class="flex align-center justify-between">
				<view class="flex align-center  ml20">
					<view class="cuIcon-round-icon mr19"></view> <text class="f28">车辆类型</text>
				</view>
				<view class="radio-text ">
					<u-radio-group v-model="value" @change="radioGroupChange">
						<u-radio v-for="(item, index) in list" :key="index" :name="item.name" :disabled="item.disabled">
							{{item.name}}
						</u-radio>
					</u-radio-group>
				</view>
			</view>

			<view class="flex align-center ml22 mt60">
				<view class="cuIcon-round-icon mr19"></view> <text class="f28">装货完成时间</text>
			</view>
			<view class="r10 h60 lh60 bgc mt20 ww90 ml38 pl20 mb55">
				<text>2021.06.01 12:30</text>
			</view>


			<view class="flex align-center justify-between">
				<view class="flex align-center  ml20">
					<view class="cuIcon-round-icon mr19"></view> <text class="f28">车辆类型</text>
				</view>
				<view class="radio-text ">
					<u-radio-group v-model="value" @change="radioGroupChange">
						<u-radio v-for="(item, index) in list" :key="index" :name="item.name" :disabled="item.disabled">
							{{item.name}}
						</u-radio>
					</u-radio-group>
				</view>
			</view>
		</view>

		<view class="w546 h155 bgc-imag">

		</view>



		<view class="pl20 pt53 r20 ml22 mr22 pb66" style="background-color: #FFFFFF;">
			<view class="pl21 pr30 mt38 lh50 fs26">
				到外地，在设备不紧张，车辆能装而且能多装设备，在无安全隐患的情况下，应向执行调度申请每一种物品多带一件备用的,是否申请？
			</view>

			<view class="radio-text1 mt47 ">
				<u-radio-group v-model="value" @change="radioGroupChange">
					<u-radio v-for="(item, index) in list" :key="index" :name="item.name" :disabled="item.disabled">
						{{item.name}}
					</u-radio>
				</u-radio-group>
			</view>


			<view class="pl21 pr30 mt38 lh50 fs26">
				大车装货不能超过1个半小时，小车装货不能超过50分钟，特殊情况例外。是否超时？
			</view>

			<view class="radio-text1 mt47 ">
				<u-radio-group v-model="value" @change="radioGroupChange">
					<u-radio v-for="(item, index) in list" :key="index" :name="item.name" :disabled="item.disabled">
						{{item.name}}
					</u-radio>
				</u-radio-group>
			</view>
		</view>




		<view class="r20 mt40 pt50 ml22 mr22" style="background-color: #FFFFFF;">
			<view class="info-text flex align-center justify-center">
				<view class="bgc1">
				</view>
				<text class="fs30">
					备货单点货
				</text>
				<view class="bgc2">
				</view>
			</view>

			<view class="pl21 pr30 mt38 lh50 fs26">
				货物装载完毕应由负责人按订单对照备货单逐个、逐项清点，确认货物数量
			</view>

			<view class="u-border-bottom  flex h80 align-center justify-between ml22 mt60">
				<view class="flex align-center">
					<view class="cuIcon-round-icon mr19"></view> <text class="f28">库管签字</text>
				</view>
				<view class="" style="color: #717171;">
					何珍妮
					<text class="cuIcon-right"></text>
				</view>
			</view>

			<view class="u-border-bottom  flex h80 align-center justify-between ml22" @tap="show = true">
				<view class="flex align-center">
					<view class="cuIcon-round-icon mr19"></view> <text class="f28">负责人签字</text>
				</view>
				<view class="" style="color: #717171;">
					请选择
					<text class="cuIcon-right"></text>
				</view>
			</view>

			<view class=" h80 ml22 mt50">
				<view class="flex align-center">
					<view class="cuIcon-round-icon mr19"></view> <text class="f28">是否完全按照备货单点货</text>
				</view>
			</view>
			<view class="radio-text1 mt37 pb53">
				<u-radio-group v-model="value" @change="radioGroupChange">
					<u-radio v-for="(item, index) in list" :key="index" :name="item.name" :disabled="item.disabled">
						{{item.name}}
					</u-radio>
				</u-radio-group>
			</view>

		</view>



		<view class="r20 pb54 mt40 pt50 ml22 mr22" style="background-color: #FFFFFF;">
			<view class="info-text flex align-center justify-center">
				<view class="bgc1">
				</view>
				<text class="fs30">
					确定数量
				</text>
				<view class="bgc2">
				</view>
			</view>

			<view class="pl21 pr30 mt38 lh50 fs26">
				负责人和库管双方确认出库数量，库管方能允许出库
			</view>

			<view class="u-border-bottom  flex h80 align-center justify-between ml22">
				<view class="flex align-center">
					<view class="cuIcon-round-icon mr19"></view> <text class="f28">负责人签字</text>
				</view>
				<view class="" style="color: #717171;">
					请选择
					<text class="cuIcon-right"></text>
				</view>
			</view>

			<view class="flex align-center ml22 mt41">
				<view class="cuIcon-round-icon mr19"></view> <text class="f28">预计到现场的时间</text>
			</view>
			<view class="r10 h60 lh60 bgc mt20 ww90 ml38 pl20 mb55 ">
				<text>请填写</text>
			</view>

		</view>



		<view class="r20 mt40 pt50 ml22 mr22" style="background-color: #FFFFFF;">
			<view class="info-text flex align-center justify-center">
				<view class="bgc1">
				</view>
				<text class="fs30">
					到达现场时间
				</text>
				<view class="bgc2">
				</view>
			</view>

			<view class="pl21 pr30 mt38 lh50 fs26">
				要求：大车提前1 一个小时达到现场，小车提前半个小时到达现场。是否准时？
			</view>

			<view class="radio-text1 mt37 pb53">
				<u-radio-group v-model="value" @change="radioGroupChange">
					<u-radio v-for="(item, index) in list" :key="index" :name="item.name" :disabled="item.disabled">
						{{item.name}}
					</u-radio>
				</u-radio-group>
			</view>

		</view>



		<view class="r20 mt40 pt50 ml22 mr22" style="background-color: #FFFFFF;">
			<view class="info-text flex align-center justify-center">
				<view class="bgc1">
				</view>
				<text class="fs30">
					了解进场沟通
				</text>
				<view class="bgc2">
				</view>
			</view>

			<view class="pl21 pr30 mt38 lh50 fs26">
				查看酒店原始伤痕、摄像取证、通知甲方、甲方负责人知情同意方可入场，甲方负责人是否知情并同意入场？
			</view>

			<view class="radio-text1 mt37 pb53">
				<u-radio-group v-model="value" @change="radioGroupChange">
					<u-radio v-for="(item, index) in list" :key="index" :name="item.name" :disabled="item.disabled">
						{{item.name}}
					</u-radio>
				</u-radio-group>
			</view>

		</view>



		<view class="ww100 mt37 mb40 ml22 mr22">
			<button type="default" class="cu-btn w322 h98 r49 f34 mr51"
				style="color: #A18710; background-color: #FFE985;">上一步</button>
			<button type="default" class="cu-btn w322 h98 r49 f34" style="color: #A18710; background-color: #FFE985;"
				@tap="$tools.to('')">保存</button>
		</view>


		<view class="ww100 mt37 mb40 ml22 mr22">
			<button type="default" class="cu-btn ww96 h98 r49 f34"
				style="color: #FFFFFF; background-color: #FA469D;">提交审核</button>
		</view>

		<view class="mt40 userInfo mb49">
			<text>审核通过后才能继续完善以下信息</text>
		</view>


		<view class="r20 mt40 pt50 ml22 mr22" style="background-color: #FFFFFF;">
			<view class="info-text flex align-center justify-center">
				<view class="bgc1">
				</view>
				<text class="fs30">
					确定位置
				</text>
				<view class="bgc2">
				</view>
			</view>

			<view class="pl21 pr30 mt38 lh50 fs26">
				与甲方负责人商议设备的摆放方式和实际位置.是否商议?
			</view>

			<view class="radio-text1 mt37 pb53">
				<u-radio-group :disabled="true" v-model="value1" @change="radioGroupChange">
					<u-radio v-for="(item, index) in list" :key="index" :name="item.name" :disabled="true">
						{{item.name}}
					</u-radio>
				</u-radio-group>
			</view>
		</view>


		<!-- selectRaio -->
		<u-popup v-model="show" border-radius="20" :closeable="true" mode="bottom" >
			<view class="mt38 ww100 text-center mb68" >选择库管</view>
			<view class="flex justify-between u-border-bottom pl22 pr22 pb20" v-for="(item, inedx ) in 5">
				<view class="">
					<image class="w80 h80 r40" src="../../static/VIP_tu.png" mode=""></image>
					<text class="ml20">一只特立独行的...</text>
				</view>
				<u-radio-group :disabled="true" v-model="value3" @change="radioGroupChange">
					<u-radio v-for="(item, index) in listRaiod" :key="index" :name="item.name" :disabled="item.disabled">
					</u-radio>
				</u-radio-group>
			</view>
			
			<view class="ww100 text-center mt20 mb60">
				<button type="default" class="cu-btn ww94 h90 r45" style="background-color: #FFE985; color: #A18710;">确认选择</button>
			</view>
		</u-popup>





		<yy-home></yy-home>

		<view class="foot_box"></view>
		<!-- 加载提示 -->
		<yy-loading text="加载中.." mask="true" click="true" ref="loading"></yy-loading>
		<!-- 信息提示-->
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	export default {
		data() {
			return {
				dataList: [{
					name: '与客户对接的时间'
				}, {
					name: '对单后确认进场时间'
				}, {
					name: '仪式开始时间'
				}, {
					name: '仪式结束时间'
				}, {
					name: '收场时间'
				}, {
					name: '核对具体地址'
				}],
				list: [{
						name: '是',
						disabled: false
					},
					{
						name: '否',
						disabled: false
					}
				],
				list2: [{
						name: '是',
						disabled: false
					},
					{
						name: '否',
						disabled: false
					}
				],
				listRaiod: [{
						name: '1',
						disabled: false
					}
				],
				// u-radio-group的v-model绑定的值如果设置为某个radio的name，就会被默认选中
				value: '是',
				value1: '',
				value2: '是',
				value3: '',
				show: false,
			};
		},
		onShow() {},
		onLoad(e) {},
		methods: {
			clkOn() {
				this.z.load(this);
				setTimeout(() => {
					this.z.load(this, 0);
				}, 3000);
			},
			// 选中任一radio时，由radio-group触发
			radioGroupChange(e) {
				console.log(e);
			},

			radioGroupChange2(e) {
				console.log(e);
			}
		}
	};
</script>

<style lang="scss" scoped>
	.content_box {
		width: 100%;
		height: 4900rpx;
		// padding: 0 22rpx;
		background-color: #9885F8;

		.userInfo {
			width: 100%;
			text-align: center;
			color: #FFFFFF;
		}

		.bgc-imag {
			position: absolute;
			left: 10%;
			top: 68%;
			background-size: 100%;
			background-repeat: no-repeat;
			background-image: url('https://w-jinxiao.oss-cn-chengdu.aliyuncs.com/20210322/142.png');
		}

		.header {
			width: 100%;
			height: 150rpx;
			line-height: 150rpx;
			display: flex;
			align-items: center;
			// padding-left: 10rpx;
			padding-top: 30rpx;
			font-size: 36rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #FFFFFF;
			background: linear-gradient(to right, #656CE6, #9397FC);

			.arrow {
				position: relative;
				display: inline-block;
			}

			.arrow::before {
				content: '';
				width: 10px;
				height: 10px;
				border: 0px;
				border-bottom: solid 2px #fff;
				border-left: solid 2px #fff;
				-ms-transform: rotate(45deg);
				-webkit-transform: rotate(45deg);
				transform: rotate(45deg);
				position: absolute;
				top: 50%;
				left: 0;
				margin-top: -4px;
				margin-left: 28rpx;
			}

			.title {
				color: #fff;
				margin: 0 auto;
			}
		}

		.cuIcon-round-icon {
			width: 18rpx;
			height: 18rpx;
			border-radius: 9rpx;
			background-color: #FBE161;
		}

		.bgc {
			background-color: #EFECFF;
		}

		.radio-text {
			width: 55%;
			text-align: center;
			display: flex;
			align-items: center;
			justify-content: center;

			/deep/.u-radio {
				width: 168rpx !important;
				height: 60rpx;
				background: #EFECFF;
				border-radius: 30rpx;
				margin-right: 20rpx;
				text-align: center !important;
				line-height: 60rpx;
				text-align: center;
			}

			/deep/.u-radio__icon-wrap--circle.data-v-0498b190 {
				border-radius: 100%;
				margin: 0 27rpx;
			}

		}

		.radio-text1 {
			width: 100%;
			text-align: center;
			display: flex;
			align-items: center;
			justify-content: center;

			/deep/.u-radio {
				width: 168rpx !important;
				height: 60rpx;
				background: #EFECFF;
				border-radius: 30rpx;
				margin-right: 20rpx;
				text-align: center !important;
				line-height: 60rpx;
				text-align: center;
			}

			/deep/.u-radio__icon-wrap--circle.data-v-0498b190 {
				border-radius: 100%;
				margin: 0 27rpx;
			}

		}



		.info-text {
			font-weight: bold;
			font-family: PingFang SC;

			.bgc1 {
				width: 60rpx;
				height: 16rpx;
				border-radius: 8rpx;
				margin-right: 16rpx;
				background-image: linear-gradient(45deg, #FFFFFF, #FA469D);
			}

			.bgc2 {
				width: 60rpx;
				height: 16rpx;
				border-radius: 8rpx;
				margin-left: 16rpx;
				background-image: linear-gradient(45deg, #FA469D, #FFFFFF);
			}
		}
	}
</style>
